<template>
  <div class="home">
    <Banner />
    <div class="cate">
      <div
        v-for="(item, index) in likeList"
        :key="index"
        class="item-box"
        @click="goDetail(item)"
      >
        <div class="imgBox">
          <img
            :src="item.defaultAlbum"
            alt=""
          >
        </div>
        <div class="priceBox">
          <div class="tls">
            {{ item.pName }}
          </div>
          <div class="prs">
            ¥{{ item.fSalePrice }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "../components/home/banner.vue";

export default {
  name: "Fruit",
  components: {
    Banner,
  },
  data() {
    return {
      likeList: [],
    };
  },
  created() {},
  mounted() {
    let dataObj = {
      iShopId: this.$route.query.iShopId,
      goodsIdExclude: this.$route.query.goodsIdExclude,
      productClass: this.$route.query.productClass,
      type: this.$route.query.type,
    };
    this.getData(dataObj);
  },
  methods: {
    getData(dataObj) {
      let params = {
        queryCondition: {
          order: [
            {
              fieldname: "iOrder",
              direction: "asc",
            },
          ],
          pagesize: 20,
          pageindex: 1,
          where: [
            {
              fieldname: "goods_id_exclude",
              valuefrom: dataObj.goodsIdExclude,
            },
            {
              fieldname: "categoryid",
              valuefrom: dataObj.productClass,
            },
            {
              fieldname: "type",
              valuefrom: dataObj.type,
            },
          ],
        },
      };
      this.$api.home.getRecommendCartList(params).then((res) => {
        if (res.code == 200) {
          console.log("获取数据", res.data);
          this.likeList = res.data.data;
        }
      });
    },
	// 看详情
	goDetail(item) {
		this.$router.push({
			path: "/fruit/detail",
			query: {
				id: item.pid,
				iShopId: item.iShopId
			},
		})
	},
  },
};
</script>

<style scoped lang="scss">
.cate {
  padding: 0 16.19rem;
  display: flex;
  margin: 8.07em 0 1.88rem 0;
  // justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  .item-box {
    margin-right: 2rem;
	margin-bottom: 2rem;
    cursor: pointer;
	background: #fff;
	padding: 1rem;
    &:nth-child(4n) {
      margin-right: 0;
    }

    .imgBox {
      height: 20.38rem;
      object-fit: contain;
      align-items: center;
      display: flex;
      justify-content: center;

      img {
        vertical-align: middle;
        width: 18rem;
        object-fit: contain;
      }
    }

    .priceBox {
      display: flex;
      flex-direction: column;
      height: auto;
      width: 18rem;
      .prs {
        color: #f0406f;
        font-size: 1.09rem;
      }

      .tls {
        color: #040000;
        font-size: 0.98rem;
        padding-bottom: 0.49rem;
		line-height:1.5rem;
		height: 3rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
      }
    }
  }
}
</style>
